<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="tourism-place"> <div class="india-tour"> <div class="taj-effect"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 padleft"> <div class="taj"> <img src="https://i.gocollette.com/img/cont/eu/no/sognefjord_fotoliarf_480x340.jpg" alt="taj view" class="image"/> <div class="overlay"> <div class="text"> <h3>India Tour</h3> <p>June 03, 2016</p> </div> </div> </div> </div> </div> <div class="taj-effect"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 padleft"> <div class="taj"> <img src="https://i.gocollette.com/img/cont/eu/no/sognefjord_fotoliarf_480x340.jpg" alt="taj view" class="image"/> <div class="overlay"> <div class="text"> <h3>India Tour</h3> <p>June 03, 2016</p> </div> </div> </div> </div> </div> <div class="taj-effect"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 padleft"> <div class="taj"> <img src="https://i.gocollette.com/img/cont/eu/no/sognefjord_fotoliarf_480x340.jpg" alt="taj view" class="image"/> <div class="overlay"> <div class="text"> <h3>India Tour</h3> <p>June 03, 2016</p> </div> </div> </div> </div> </div> <div class="taj-effect"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 padleft"> <div class="taj"> <img src="https://i.gocollette.com/img/cont/eu/no/sognefjord_fotoliarf_480x340.jpg" alt="taj view" class="image"/> <div class="overlay"> <div class="text"> <h3>India Tour</h3> <p>June 03, 2016</p> </div> </div> </div> </div> </div> </div> <div class="india-tour"> <div class="taj-effect"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 padleft"> <div class="taj"> <img src="https://i.gocollette.com/img/cont/eu/no/sognefjord_fotoliarf_480x340.jpg" alt="taj view" class="image"/> <div class="overlay"> <div class="text"> <h3>India Tour</h3> <p>June 03, 2016</p> </div> </div> </div> </div> </div> <div class="taj-effect"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 padleft"> <div class="taj"> <img src="https://i.gocollette.com/img/cont/eu/no/sognefjord_fotoliarf_480x340.jpg" alt="taj view" class="image"/> <div class="overlay"> <div class="text"> <h3>India Tour</h3> <p>June 03, 2016</p> </div> </div> </div> </div> </div> <div class="taj-effect"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 padleft"> <div class="taj"> <img src="https://i.gocollette.com/img/cont/eu/no/sognefjord_fotoliarf_480x340.jpg" alt="taj view" class="image"/> <div class="overlay"> <div class="text"> <h3>India Tour</h3> <p>June 03, 2016</p> </div> </div> </div> </div> </div> <div class="taj-effect"> <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 padleft"> <div class="taj"> <img src="https://i.gocollette.com/img/cont/eu/no/sognefjord_fotoliarf_480x340.jpg" alt="taj view" class="image"/> <div class="overlay"> <div class="text"> <h3>India Tour</h3> <p>June 03, 2016</p> </div> </div> </div> </div> </div> </div> </div>

.tourism-place{float:left; width:100%; margin-top:70px;} .padleft{padding:0 !important;} .taj-effect { position: relative; width: 100%; } .taj h3{margin-bottom:0;line-height:28px; font-size:18px; text-transform:uppercase; font-weight:600; color:#f4b843;} .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0px; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: rgba(0, 0, 0, 0.57); } .taj-effect:hover .overlay { opacity: 1; } .text { color: white; font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); }